<template>
  <div>
    <van-popup
      v-model="showAppRight"
      position="right"
      :style="{ height: '100%', width: '55%' }"
    >
      <div class="popup_box">
        <div class="close">
          <img src="@/static/he.png" @click="close" class="img" alt="" />
        </div>
        <div class="page_box">
          <div
            class="item"
            @click="goToApp('video')"
            :class="pathText == 1 ? 'changeItem' : 'transparent '"
          >
            <div class="flex_">
              <div class="dian"></div>
              <div>{{ currentObj.TikTokDownloader }}</div>
            </div>
          </div>
          <div
            class="item flex_"
            @click="goToApp('mp3')"
            :class="pathText == 2 ? 'changeItem' : 'transparent'"
          >
            <div class="flex_">
              <div class="dian"></div>
              <div>{{ currentObj.DownloadTikTokMP3 }}</div>
            </div>
          </div>
          <div
            class="item flex_"
            @click="goToApp('story')"
            :class="pathText == 3 ? 'changeItem' : 'transparent'"
          >
            <div class="flex_">
              <div class="dian"></div>
              <div>{{ currentObj.DownloadTikTokStory }}</div>
            </div>
          </div>
        </div>
        <div class="Language_box">
          <div class="title">*Language</div>
          <div class="content">
            <div
              class="item flex_"
              @click="changeLanguage(item, k)"
              :class="current == k ? 'changeItem' : 'transparent '"
              :key="k"
              v-for="(item, k) in list"
            >
              <div class="dian"></div>
              <div>{{ item }}</div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from "vuex";
import { handleClick } from "@/plugins/Firebase.js";
import dataList from "@/static/tools.js";

export default {
  computed: {
    ...mapGetters(["language"]),
    current() {
      if (this.list1.findIndex((x) => x == this.path) >= 0) {
        return this.list1.findIndex((x) => x == this.path);
      }else{
        return 0
      }
    },
    path() {
      if (this.$route.path.length < 2) {
        return "en";
      } else {
        return this.$route.path.substring(1, 3);
      }
    },
    currentObj() {
      return this.currentList[this.current];
    },
    pathText() {
      let path = this.$route.path;

      if (/mp3/.test(path)) {
        // This code handles cases including 'mp3'
        return "2";
      } else if (/story/.test(path)) {
        // This code handles cases including 'story'
        return "3";
      } else if (
        /contact/.test(path) ||
        /terms/.test(path) ||
        /privacy/.test(path)
      ) {
        // This code handles cases including 'contact', 'terms', or 'privacy'
        return "0";
      } else {
        // This code handles the case where 'mp3', 'story', 'contact', 'terms', or 'privacy' are not included
        return "1";
      }
    },
  },
  created() {
    // this.$router.push(this.language + "/");
  },
  mounted() {
    if (process.client) {
      if (!localStorage.getItem("language")) {
        localStorage.setItem("language", "en");
        this.setLanguageHandel("en");
      } else {
        this.setLanguageHandel(localStorage.getItem("language"));
      }
    }
  },
  data() {
    return {
      currentList: dataList.list,
      showAppRight: false,
      list: [
        "English", // 英语
        "Bahasa Indonesia", // 印度尼西亚语
        "Tiếng Việt", // 越南语
        "Bahasa Malaysia", // 马来语
        "Basa Jawa", // 爪哇语
        "Čeština", // 捷克语
        "Español", // 西班牙语
        "Français", // 法语
        "German", // 德语
        "Italian", // 意大利语
        "Magyar", // 匈牙利语
        "Nederlands", // 荷兰语
        "Polish", // 波兰语
        "Português", // 葡萄牙语
        "Română", // 罗马尼亚语
        "Thailand", // 泰语
        "Turkish (Turkey)", // 土耳其语
        "Ελληνικά", // 希腊语
        "украї́нська мо́ва", // 乌克兰语
        "Русский", // 俄语
        "عَرَبِيّ", // 阿拉伯语
        "한국어", // 韩语
        "日本語", // 日语
      ],
      list1: [
        "en", // 英语
        "id", // 印度尼西亚语
        "vn", // 越南语
        "ms", // 马来语
        "jv", // 爪哇语
        "cs", // 捷克语
        "es", // 西班牙语
        "fr", // 法语
        "de", // 德语
        "it", // 意大利语
        "hu", // 匈牙利语
        "nl", // 荷兰语
        "pl", // 波兰语
        "pt", // 葡萄牙语
        "ro", // 罗马尼亚语
        "th", // 泰语
        "tr", // 土耳其语
        "el", // 希腊语
        "uk", // 乌克兰语
        "ru", // 俄语
        "ar", // 阿拉伯语
        "ko", // 韩语
        "ja", // 日语
      ],
    };
  },
  // props: {
  //   openBtn: {
  //     type: Boolean,
  //     required: false, // 这表明 "myProp" 属性是必需的
  //   },
  // },
  methods: {
    goToApp(type) {
      // if (this.language == "en") {
      //   if (type == "video") {
      //     this.$router.push("/");
      //   } else if (type == "mp3") {
      //     this.$router.push("/download-tiktok-mp3");
      //   } else {
      //     this.$router.push("/download-tiktok-story");
      //   }
      // } else {
      //   if (type == "video") {
      //     this.$router.push("/" + this.language);
      //   } else if (type == "mp3") {
      //     this.$router.push(this.language + "/download-tiktok-mp3");
      //   } else {
      //     this.$router.push(this.language + "/download-tiktok-story");
      //   }
      // }
      let url = "";
      switch (type) {
        case "video":
          url = "";
          break;
        case "mp3":
          url = "/download-tiktok-mp3";
          break;
        default:
          url = "/download-tiktok-story";
      }
      if (this.language !== "en") {
        url = `/${this.language}${url}`;
      } else if (this.language == "en" && type == "video") {
        url = `/`;
      }
      this.$router.push(url);

      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "top",
      });
    },
    ...mapMutations(["setLanguage"]),
    setLanguageHandel(lang) {
      this.setLanguage(lang);
    },
    changeLanguage(item, k) {
      localStorage.setItem("language", this.list1[k]);
      this.setLanguage(this.list1[k]);
      if (this.list1[k] == "en") {
        this.$router.push("/");
      } else {
        this.$router.replace("/" + this.list1[k]);
      }
    },
    changeOpenBtn() {
      this.showAppRight = !this.showAppRight;
    },
    close() {
      this.showAppRight = false;
    },
    open() {
      this.showAppRight = true;
    },
    stop() {},
  },
};
</script>
<style lang="scss" scoped>
.popup_box {
  width: 100%;
  height: 100%;
  background: #080f25;

  .close {
    padding: 14px;
    .img {
      width: 26px;
      height: 26px;
    }
  }
  .page_box {
    margin-bottom: 20px;
    .item {
      padding: 16px;
      padding-left: 20px;
      font-size: 12px;
      font-family: Poppins-Regular, Poppins;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);
      .dian {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #00fff7;
        margin-right: 8px;
      }
    }

    .changeItem {
      background-color: rgba(17, 44, 60, 0.3);
      font-size: 12px;
      font-family: Poppins-Bold, Poppins;
      font-weight: bold;
      color: #00fff7;
    }
    .transparent {
      .dian {
        background: transparent;
      }
    }
  }
  .Language_box {
    padding-top: 30px;
    border-top: 1px solid rgba(217, 217, 217, 0.1);
    .title {
      font-size: 12px;
      font-family: Poppins-Regular, Poppins;
      font-weight: 400;
      color: #ffffff;
      padding-bottom: 10px;
      padding-left: 20px;
    }
    .content {
      height: calc(100vh - 350px);
      overflow-y: auto;
    }
    .item {
      padding: 16px;
      padding-left: 20px;
      font-size: 12px;
      font-family: Poppins-Regular, Poppins;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);
      .dian {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #00fff7;
        margin-right: 8px;
      }
    }
    .changeItem {
      background-color: rgba(17, 44, 60, 0.3);
      font-size: 12px;
      font-family: Poppins-Bold, Poppins;
      font-weight: bold;
      color: #00fff7;
    }
    .transparent {
      .dian {
        background: transparent;
      }
    }
  }
}
</style>